<template>
  <div class="page page-schedule-details">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">返回</span>
          </a>
        </div>
        <div class="title">{{title}}</div>
      </div>
    </div>
    <div class="page-content ">
      <div class="list schedule-details-list inline-labels no-hairlines-md" style="margin:0">
        <ul class="process-form">
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">主题</div>
              <div class="item-input-wrap">
                <input type="text" id="scheduletitle" disabled value="">
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">开始时间</div>
              <div class="item-input-wrap">
                <input id="kssj" type="text" disabled value="">
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">结束时间</div>
              <div class="item-input-wrap">
                <input id="jssj" type="text" disabled value="">
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">类型</div>
              <div class="item-input-wrap">
                <input id="programtype" type="text" disabled value="">
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">紧急程度</div>
              <div class="item-input-wrap">
                <input id="programLevel" type="text" disabled value="">
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">提醒方式</div>
              <div class="item-input-wrap">
                <input id="remindMethod" type="text" disabled value="">
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">内容</div>
              <div class="item-input-wrap">
                <textarea disabled id="programcontent"></textarea>
              </div>
            </div>
          </li>
        </ul>
      </div>

    </div>
    <div class="page-footer">
      <p class="segmented segmented-raised">
        <button class="button ">结束</button>
        <button class="button button-active ">删除</button>
      </p>
    </div>
  </div>


</template>
<style>
  .page-schedule-details{
    background-color: #fff !important;
  }
  .page-schedule-details .page-footer {
    z-index: 9;
    width: 100%;
    position: absolute;
    bottom: 0 !important; }
  .page-schedule-details .page-footer .segmented {
    margin: 0;
    display: block;
    overflow: auto; }
  .page-schedule-details .page-footer .segmented .button {
    float: left;
    width: 50%;
    border-radius: 0;
    height: 44px;
    line-height: 44px;
    background-color: #f0f0f0;
    color: #333;
    border-color: transparent; }
  .page-schedule-details .page-footer .segmented .button-active {
    color: #fff;
    background-color: #db2d2d;
    border-color: #db2d2d; }


</style>
<script>
  return {
    // Lifecycle Hooks
    beforeCreate() {
      console.log('componentBeforeCreate', this);
    },
    created() {
      console.log('componentCreated', this);
    },
    beforeMount() {
      console.log('componentBeforeMount', this);

    },
    mounted() {
      console.log('componentMounted', this);
      console.log('组件转载完成，拿全局变量中的用户信息去查询后台', this.$root.user);
      app.preloader.show();
      setTimeout(function () {
        this.content = {
          title:'主题主题',
          kssj:'2018/3/3 11:11:11',
          jssj:'2018/3/3 12:11:11',
          programtype:'类型一',
          programLevel:'紧急',
          remindMethod:'提醒方式一',
          programcontent:'日程内容日程内容日程内容日程内容日程内容日程内容日程内容日程内容'
        };
        this.updateScheduleDetails();
        app.preloader.hide();
      }.bind(this),1000)
    },
    beforeDestroy() {
      console.log('componentBeforeDestroy', this);
    },
    destroyed() {
      console.log('componentDestroyed', this);
    },
    // Component Data
    data: function () {
      // Must return an object
      return {
        title: this.$route.params.title,
        id: this.$route.params.id,
        content:{}
      }
    },
    // Component Methods
    methods: {
      updateScheduleDetails:function () {
        $$('#scheduletitle').val(this.content.title);
        $$('#kssj').val(this.content.kssj);
        $$('#jssj').val(this.content.jssj);
        $$('#programtype').val(this.content.programtype);
        $$('#programLevel').val(this.content.programLevel);
        $$('#remindMethod').val(this.content.remindMethod);
        $$('#programcontent').val(this.content.programcontent);
      },
      pageFooterClick:function (e) {
        if(e.target.innerHTML === '结束'){
          app.dialog.preloader('结束中...');
          setTimeout(function () {
            app.dialog.close();
            this.$router.back({ignoreCache:true});
          }.bind(this),1000)
        }else if(e.target.innerHTML === '删除'){
          console.log('执行删除操作');
          app.dialog.preloader('删除中...');
          setTimeout(function () {
            app.dialog.close();
            app.dialog.alert('删除失败!','提示');
          }.bind(this),1000)
        }
      }
    },
    // Page Events
    on: {
      pageMounted: function (e, page) {
        console.log('pageMounted', page);
      },
      pageInit: function (e, page) {
        console.log('pageInit', page);
      },
      pageBeforeIn: function (e, page) {
        console.log('pageBeforeIn', page);
      },
      pageAfterIn: function (e, page) {
        console.log('pageAfterIn', page);
        $$('.page-schedule-details .page-footer').on('click','.button',this.pageFooterClick)
      },
      pageBeforeOut: function (e, page) {
        console.log('pageBeforeOut', page);
        $$('.page-schedule-details .page-footer').off('click','.button',this.pageFooterClick)
      },
      pageAfterOut: function (e, page) {
        console.log('pageAfterOut', page);
      },
      pageBeforeRemove: function (e, page) {
        console.log('pageBeforeRemove', page);
      },
    }
  };

</script>
